添加一个右侧按钮

addRightButton('类型' [, '按钮属性', '弹窗形式', '扩展参数'])

版本功能
1.0.5弹窗支持自定义js回调函数
1.0.5自定义按钮的类型不再仅限于custom，可使用任意单词作为自定义按钮
1.0.7支持自定义数据操作方式，默认为Db::name()
1.1.0支持单独设置右侧按钮样式

有了数据，肯定也需要对数据进行操作，那么就要给每一行添加一些按钮。

DolphinPHP内置了几种常用的右侧按钮，比如：编辑、启用、禁用、删除、自定义。

按钮类型标识符
编辑edit
启用enable
禁用disable
删除delete
自定义1.0.5版本以后，自定义按钮类型可按需求填写，不再限定于custom类型

注意：要使用这些按钮，需要将对应的操作添加到节点菜单，否则除管理员外，其他用户将无权限操作。
其中，编辑按钮的操作方法需要自己实现，默认是当前控制器的edit方法。

比如我们添加两个按钮，编辑和删除。

首先，我们要添加多一列，用来放置这些按钮，字段名必须为“right_button”，类型为“btn”。

  1. // 读取用户数据
  2. $data_list = Db::name('admin_user')->select();
  3. // 使用ZBuilder构建数据表格
  4. return ZBuilder::make('table')
  5. ->addColumn('id', 'ID')
  6. ->addColumn('username', '用户名')
  7. ->addColumn('nickname', '昵称')
  8. ->addColumn('email', '邮箱')
  9. ->addColumn('mobile', '手机号')
  10. ->addColumn('create_time', '创建时间')
  11. ->addColumn('right_button', '操作', 'btn')
  12. ->setRowList($data_list) // 设置表格数据
  13. ->fetch();

接着，使用addRightButton()方法添加两个右侧按钮。

  1.     ->addRightButton('edit')
  2.     ->addRightButton('delete')

添加一个右侧按钮 - 图1

修改内置按钮属性

内置按钮默认有5个属性，分别是

属性含义
title标题
icon字体图标
classcss类
href按钮链接
target打开方式

我们可以通过第二个参数来修改内置按钮的属性，比如，我们希望给编辑按钮添加额外参数，那么就必须修改href属性，并且要用数组的方式修改。

  1. ->addRightButton('edit', ['href' => url('edit', ['group' => 'index'])])

需要注意的是，编辑操作不需要指定数据的主键值，一般是id，如果按上面的修改，是不正确的，需要把主键值也带进去。主键名用__id__代替。

  1. ->addRightButton('edit', ['href' => url('edit', ['id' => '__id__', 'group' => 'index'])])

那么生成的url链接为：http://\*\*\*\*.com/admin.php/cms/index/edit/id/1/group/index.html

从1.0.3版本开始，支持用“__字段名__”来获取字段名值。注意，主键值依然只能用“__id__”来获取。

  1. ->addRightButton('edit', ['href' => url('edit', ['id' => '__id__', 'group' => '__group__'])])

生成url时，__group__会被自动替换成group字段的值。

会生成url：http://\*\*\*\*.com/admin.php/cms/index/edit/id/1/group/index.html

修改主键名

如果你的主键名不是id，比如是username，那么可以这样定义

  1. ->addRightButton('edit', ['href' => url('edit', ['username' => '__id__', 'group' => 'index'])])

生成的链接为：http://\*\*\*\*.com/admin.php/cms/index/edit/username/1/group/index.html

设置主键名

注意，如果修改了主键名，那么必须告诉构建器你的主键名是什么。请示用setPrimaryKey方法，只需使用一次即可。

  1. ->addRightButton('edit', ['href' => url('edit', ['username' => '__id__', 'group' => 'index'])])
  2. ->setPrimaryKey('username')

添加额外属性

当然，除了修改按钮属性外，还可以给按钮添加额外的自定义属性，比如data-**这种。

  1. ->addRightButton('edit', ['data-test' => 'test'])

启用、禁用和删除

如果是启用、禁用和删除按钮，系统会默认去操作“当前模块名_当前控制器名”的数据表，如果表名不是“当前模块名_当前控制器名”，那么需要另外指定表名。

  1. ->addRightButton('enable', ['table' => 'admin_user']) // 启用
  2. ->addRightButton('disable', ['table' => 'admin_user']) // 禁用
  3. ->addRightButton('delete', ['table' => 'admin_user']) // 删除

从1.0.7版本开始，启用、禁用和删除功能除了可以自定义表名外，还支持使用模型

默认使用Db::name('admin_user')操作数据

  1. ->addRightButton('enable', ['table' => 'admin_user'])
  2. 等同于
  3. ->addRightButton('enable', ['table' => 'admin_user', 1])

使用Db::table('admin_user')操作数据

  1. ->addRightButton('enable', ['table' => 'admin_user', 0])

使用指定模型model('admin/user')操作数据

  1. ->addRightButton('enable', ['table' => 'admin/user', 2])
  2. 等同于
  3. ->addRightButton('enable', ['table' => 'admin/user', true])

自定义按钮

右侧按钮的默认css类为：btn btn-xs btn-default

提示：1.0.5版以后，自定义按钮不再限定于custom类型，只要不是默认的按钮类型，其他均属于自定义按钮。

  1. $btn_access = [
  2.     'title' => '授权',
  3.     'icon'  => 'fa fa-fw fa-key',
  4.     'href'  => url('access', ['uid' => '__id__'])
  5. ];
  7. ->addRightButton('custom', $btn_access) // 添加授权按钮
  8. 或者
  9. ->addRightButton('access', $btn_access) // 添加授权按钮

ajax跳转

如果你的右侧按钮希望是ajax提交的话，可以给按钮的css类添加“ajax-get”

  1. $btn_access = [
  2.     'title' => '授权',
  3.     'icon'  => 'fa fa-fw fa-key',
  4.     'class' => 'btn btn-xs btn-default ajax-get',
  5.     'href'  => url('access', ['uid' => '__id__'])
  6. ];
  8. ->addRightButton('custom', $btn_access) // 添加授权按钮

执行确认

如果希望给按钮加上确认框，可以添加confirm类名

  1. $btn_access = [
  2.     'title' => '授权',
  3.     'icon'  => 'fa fa-fw fa-key',
  4.     'class' => 'btn btn-xs btn-default ajax-get confirm',
  5.     'href'  => url('access', ['uid' => '__id__'])
  6. ];
  8. ->addRightButton('custom', $btn_access) // 添加授权按钮

添加一个右侧按钮 - 图2

从1.0.3版本开始，确认框的标题支持自定义，只需添加“data-title”属性。

  1. $btn_access = [
  2.     'title' => '授权',
  3.     'icon'  => 'fa fa-fw fa-key',
  4.     'class' => 'btn btn-xs btn-default ajax-get confirm',
  5.     'href'  => url('access', ['uid' => '__id__']),
  6.     'data-title' => '真的要删除吗？'
  7. ];
  9. ->addRightButton('custom', $btn_access) // 添加授权按钮

添加一个右侧按钮 - 图3

也可以显示额外的提示文字，只需添加“data-tips”属性。

  1. $btn_access = [
  2.     'title' => '授权',
  3.     'icon'  => 'fa fa-fw fa-key',
  4.     'class' => 'btn btn-xs btn-default ajax-get confirm',
  5.     'href'  => url('access', ['uid' => '__id__']),
  6.     'data-title' => '真的要删除吗？',
  7.     'data-tips' => '删除了就无法恢复了'
  8. ];
  10. ->addRightButton('custom', $btn_access) // 添加授权按钮

添加一个右侧按钮 - 图4

也可以自定义按钮文字

  1. $btn_access = [
  2.     'title' => '授权',
  3.     'icon'  => 'fa fa-fw fa-key',
  4.     'class' => 'btn btn-xs btn-default ajax-get confirm',
  5.     'href'  => url('access', ['uid' => '__id__']),
  6.     'data-title' => '真的要删除吗？',
  7.     'data-tips' => '删除了就无法恢复了',
  8.     'data-confirm' => '删除吧',
  9.     'data-cancel' => '再想想'
  10. ];
  12. ->addRightButton('custom', $btn_access) // 添加授权按钮

添加一个右侧按钮 - 图5

弹窗形式打开

如果需要以弹出层的方式打开页面的话，只需将第三个参数设置为true即可，比如：

  1.     ->addRightButton('edit', [], true)

小提示：默认情况下，在弹出框操作完成之后，弹出框不会关闭。如果需要关闭弹出框，可以回传“_close_pop”指令。

  1. $this->success('保存成功', null, '_close_pop');
  2. 或者
  3. $this->success('保存成功', null, ['_close_pop' => 1]);

如果希望刷新父窗口，可以回传“_parent_reload”指令。

  1. $this->success('保存成功', null, '_parent_reload');
  2. 或
  3. $this->success('保存成功', null, ['_parent_reload' => 1]);

自定义弹窗

从1.0.3开始，弹窗支持自定义，比如重新定义弹窗的大小，标题等，只需要以数组形式传入配置参数即可，更多参数，请参考：layer手册

比如修改弹窗的宽和高，可以这样做。

  1. ->addRightButton('edit', [], ['area' => ['800px', '90%']])
  2. 或者
  3. ->addRightButton('edit', [], ['area' => '800px'])

或者重新指定弹窗标题

  1. ->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => '这是新标题'])

也可以加个图标什么的

  1. ->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => '<i class="fa fa-user"></i> 这是新标题'])

当然也可以不显示标题

  1. ->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => false])

甚至可以定义标题样式

  1. ->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => ['新标题', 'font-size:18px;']])

定义皮肤

  1. ->addRightButton('edit', [], ['skin' => 'layui-layer-lan'])

自定义弹窗的js回调函数

从1.0.5版本开始，弹窗支持自定义js回调函数，比如关闭弹窗时执行的回调cancel

在设置js回调函数前，需要先定义好用于回调的js函数，可以用->js()方法(引入js文件)，然后在这个js文件中声明一个函数，也可以使用设置额外JS代码的方法声明。

  1. ->js('test')
  2. ->addRightButton('add', [], ['cancel' => 'cl'])

test.js代码如下：

  1. var cl = function (index, layero) {
  2.     if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
  3.         layer.close(index)
  4.     }
  5.     return false;
  6. };

更多参数设置，请自行到layer官网查看手册。

弹窗的全局参数配置

除了可以在ZBuilder中设置弹窗参数外，从1.0.3版本开始，可以在application\extra\zbuilder.php文件中设置全局参数。

注意：全局参数配置的优先级比在ZBuilder中直接设置参数低

自定义右侧按钮样式

从1.0.3版本开始，右侧按钮的样式，可以在全局配置文件application\extra\zbuilder.php中自定义。

  1. // 右侧按钮
  2.     'right_button' => [
  3.         // 是否显示按钮文字
  4.         'title' => false,
  5.         // 是否显示图标，只有显示文字时才起作用
  6.         'icon'  => true,
  7.         // 按钮大小：xs/sm/lg，留空则为普通大小
  8.         'size' => 'xs',
  9.         // 按钮样式：default/primary/success/info/warning/danger
  10.         'style' => 'primary'
  11.     ]

单独设置按钮样式(1.1.0+)

除了可以使用上面的方式统一设置按钮样式，也可以单独设置，此功能需要1.1.0版本以上才支持。

单独显示标题

  1. ->addRightButton('edit', [], false, ['title' => true])

单独修改按钮大小

  1. ->addRightButton('edit', [], false, ['size' => 'sm'])

单独隐藏图标

  1. ->addRightButton('edit', [], false, ['title' => true, 'icon' => false])